<template>
  <!-- 上方主体 -->
  <b-col v-if="dynamic.content != '0'" class="rounded">
    <!-- 用户信息 -->
    <UserInfoView :key="dynamic.id" :type="2" :user="dynamic.user" />
    <!-- 内容 -->
    <b-row class="mt-3">
      <b-col>
        {{dynamic.content}}
      </b-col>
    </b-row>
    <!-- 分享的图片 -->
    <b-row class="mt-5">
      <b-col class="pr-1 mb-1 col-auto" :class="{'pl-0':(index+1)%3 == 2 || (index+1)%3 == 0}" v-for="(u,index) in url" :key="u.id+createId(4)">
        <viewer>
          <b-img class="rounded-lg border shadow-sm img" height="160" width="160" :src="u" />
        </viewer>
      </b-col>
    </b-row>
    <!-- 署名和时间 -->
    <b-row class="mt-3 mb-2 align-items-end" style="height:200px">
      <b-col style="font-size:15px" class="pr-0 col-auto text-muted">发布于{{getTime(dynamic.time)}}</b-col>
      <b-col style="font-size:15px;color:#55a0dd;" class="pl-1 col-auto">· 动态</b-col>
      <b-col style="font-size:15px" class="text-right">
        <span class="iconfont icon-good text-muted mr-3">{{dynamic.likeNum}}</span>
        <span class="iconfont icon-browse text-muted mr-2">{{dynamic.view}}</span>
      </b-col>
    </b-row>
  </b-col>
</template>
<script>
import tool from '@/utils/tool'
import { nanoid } from 'nanoid'
import UserInfoView from '@/components/UserInfoView'
export default {
  components: {
    UserInfoView,
  },
  props: {
    id: String,
  },
  data() {
    return {
      dynamic: {
        content: "0",
        time: {},
        user: {
          name: "佚名",
        }
      },
      //图片列表
      url: [],
      //传给父组件的内容
      content_pre: null,
    }
  },
  created() {
    //获取动态内容
    this.$httpIssue.getEntity(this.id, "dynamic").then((res) => {
      this.dynamic = res;
      this.$parent.isGood = res.isLike == 1 ? true : false;
      if (res.imageUrl != null) this.url = res.imageUrl.split(",");
      this.content_pre = res.content;
      document.title = "动态-" + res.content;
    })
  },
  methods: {
    //时间转换
    getTime(time) {
      return tool.transTime(time);
    },
    //生成唯一id
    createId() {
      return nanoid(4);
    }
  },
}
</script>
<style scoped>
.img:hover {
  filter: alpha(Opacity=80);
  -moz-opacity: 0.8;
  opacity: 0.8;
  cursor: pointer;
}
</style>
